<script>
export default {
  data() {
    return {
      message: "Hello, World!"
    }
  },
  // 一个组件的完整生命周期
  beforeCreate() {
    console.log("组件创建之前");
  },
  created() {
    console.log("组件创建之后");
  },
  beforeMount() {
    console.log("组件挂载之前");
  },
  mounted() {
    console.log("组件挂载之后");
  },
  beforeUpdate() {
    console.log("组件更新之前");
  },
  updated() {
    console.log("组件更新之后");
  },
  beforeUnmount() {
    console.log("组件卸载之前");
  },
  unmounted() {
    console.log("组件卸载之后");
  },
  methods: {
    modifyMessage() {
      this.message = "Hello, Vue!";
    }
  }
}
</script>

<!-- 
声明周期函数：
  1. 创建阶段
    beforeCreate
    created
  2. 挂载阶段
    beforeMount
    mounted
  3. 更新阶段
    beforeUpdate
    updated
  4. 销毁阶段
    beforeUnmount
    unmounted
-->

<template>
  <h1>组件的生命周期</h1>
  <p>{{ message }}</p>
  <button @click="modifyMessage">修改消息，点击我将触发组件更新前后的消息</button>
</template>

<style scoped></style>